<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog
    :title="!form.menuId ? $t('add') : $t('edit')"
    :visible.sync="visible"
  >
    <el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('type')" prop="type">
            <el-radio-group v-model="form.type" size="small">
              <el-radio-button label="0">{{ $t('menu') }}</el-radio-button>
              <el-radio-button label="1">{{ $t('button') }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上级菜单">
            <treeselect
              v-model="form.parentId"
              :options="menuOptions"
              :normalizer="normalizer"
              :show-count="true"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item v-if="form.type === '0'" :label="$t('icon')" prop="icon">
        <el-input v-model="form.icon">
          <template slot="prepend">
            <i
              :class="form.icon"
            />
          </template>
          <template slot="append">
            <i class="el-icon-caret-bottom" @click="choseIcon" />
          </template>
        </el-input>
        <div v-show="isIconOpen">
          <i
            v-for="(item,index) in iconList"
            :key="index"
            style="margin-left: 4px;cursor: pointer;width: 40px;height: 40px"
            :class="item"
            @click="changeIco(item,200145308)"
          />
        </div>
      </el-form-item>
      <el-form-item :label="$t('name')" prop="name">
        <el-input :value="getTitle(form.title)" :placeholder="$t('name')" :disabled="true" />
      </el-form-item>
      <el-form-item :label="$t('title')" prop="name">
        <el-input v-model="form.title" :placeholder="$t('title')" />
      </el-form-item>
      <el-form-item :label="$t('keyName')" prop="name">
        <el-input v-model="form.keyName" :placeholder="$t('keyName')" />
      </el-form-item>
      <el-form-item v-if="form.type !== '1'" :label="$t('path')" prop="path">
        <el-input v-model="form.path" :placeholder="$t('path')" />
      </el-form-item>
      <el-form-item v-if="form.type === '1'" :label="$t('power')" prop="permission">
        <el-input v-model="form.permission" maxlength="50" />
      </el-form-item>
      <el-form-item :label="$t('rank')" prop="sort">
        <el-input-number v-model="form.sort" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.type !== '1'" :label="$t('buffer')" prop="keepAlive">
              <el-radio-group v-model="form.keepAlive">
                <el-radio-button label="0">{{ $t('close') }}</el-radio-button>
                <el-radio-button label="1">{{ $t('open') }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-radio v-model="form.superMenu" :label="true">{{ $t('super') }}</el-radio>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit">{{ $t('confirm') }}</el-button>
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { insertCompanyMenu, treeCompanyMenu, getCompanyMenu, updateCompanyMenu } from '@/api/iot/iotCompanyMenuApi'
import Treeselect from '@riophae/vue-treeselect'
import iconList from './iconList'
import TableForm from './'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getUserId } from '@/util/storage'
import { successNotice, listApp } from '@/util/common'

export default {
  name: 'Menu',
  components: { Treeselect, TableForm },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 菜单树选项
      menuOptions: [],
      // 是否显示弹出层
      visible: false,
      menuTitle: this.$t('function'),
      // 图标
      iconList: iconList,
      form: {
        keyName: undefined,
        path: undefined,
        icon: undefined,
        permission: undefined,
        onlySelf: false,
        userId: null,
        type: '0',
        keepAlive: '0',
        sort: 999
      },
      // 表单校验
      rules: {
        keyName: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '路由地址不能为空', trigger: 'blur' }
        ],
        keepAlive: [
          { required: true, message: '路由缓冲不能为空', trigger: 'blur' }
        ],
        permission: [
          { required: true, message: '权限标识不能为空', trigger: 'blur' }
        ]
      },
      isIconOpen: false

    }
  },
  mounted() {

  },
  methods: {
    getTitle(title) {
      if (!title) {
        return ''
      }
      let str = ''
      title.split(' ').forEach(s => {
        str = str + this.$t(s)
      })
      return str
    },
    choseIcon() {
      if (this.isIconOpen) {
        this.isIconOpen = false
      } else {
        this.isIconOpen = true
      }
    },
    changeIco(icon) {
      this.isIconOpen = false
      this.form.icon = icon
    },
    init(isEdit, id) {
      if (id != null) {
        this.form.parentId = id
      }
      this.visible = true
      this.getTreeselect()
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (isEdit) {
          getCompanyMenu({
            'menuId': id
          }).then(res => {
            const { data } = res
            this.form = data
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.form.parentId === undefined) {
            this.form.parentId = -1
          }
          if (!this.form.onlySelf) {
            this.form.userId = null
          } else {
            this.form.userId = getUserId()
          }
          if (this.form.menuId) {
            updateCompanyMenu(this.form).then(data => {
              successNotice(this)
              this.visible = false
              this.form = {}
              this.$emit('refreshDataList')
            })
          } else {
            insertCompanyMenu(this.form).then(data => {
              successNotice(this)
              this.visible = false
              this.form = {}
              this.$emit('refreshDataList')
            })
          }
        }
      })
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      treeCompanyMenu({
      }).then(res => {
        const { data } = res
        this.menuOptions = []
        const menu = { id: -1, keyName: '根菜单', children: [] }
        menu.children = data
        this.menuOptions.push(menu)
      })
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: this.$t(node.keyName),
        children: node.children
      }
    }
  }
}
</script>
